<!--插件模板-->
<template>
  <div v-show="formData[key].isshow">
    <el-form-item :label="component.attrName" :id="config.key"  :prop="key + '.value'" :required="formData[key].required.split(',').includes('empty')">
      <div @click="clickHandler" class="click-wrap">
        <el-input
          v-model="formData[key].value"
          readonly
          class="hide"
        ></el-input>
        <el-input v-model="formData[key].text" readonly>
          <template slot="append">
            <a href="javascript:;">
              <i class="el-icon-more"></i>
            </a>
          </template>
        </el-input>
      </div>
    </el-form-item>
    <el-dialog
      :title="component.attrName"
      :visible.sync="show"
      width="70"
      :withHeader="false"
      class="m-dialog"
    >
      <div v-loading="loading">
        <div class="empty" v-if="loading"></div>
        <template v-else>
          <content-list
            v-if="config.dialogType == 'LIST'"
            v-bind="$attrs"
            v-on="$listeners"
            :pageInfo="pageInfo"
            :content="config.dialogContent"
            @load="load"
            @getrow="getrow"
          ></content-list>
        </template>
        <content-tree
          v-if="config.dialogType == 'TREE'"
          v-bind="$attrs"
          v-on="$listeners"
          :content="config.dialogContent"
          @load="load"
          @getrow="getrow"
        ></content-tree>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ContentList from "./content-list.vue";
import ContentTree from "./content-tree.vue";
import http from "../../utils/http";
export default {
  name: "DialogInput",
  components: {
    ContentList,
    ContentTree,
  },
  data() {
    return {
      show: false,
      currentValue: "",
      pageInfo: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      loading: false,
      showValue: "",
    };
  },
  props: {
    component: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
    },
    ruleData: {
      type: Object,
    },
    actionValue: {
      type: String,
      default: "",
    },
    span: {
      type: Number || String,
      default: 16,
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    key() {
      return this.component.pageTempStructId + "-" + this.component.attrId;
    },
    jaddress() {
      return this.formData["1688-100010640"].value;
    },
    yaddress() {
      return this.formData["1689-100010640"].value;
    },
    yunType(){ //资源池类型 2为私有云  1为共有云
       return (this.formData["10460342-142002269"].value).slice(-1);  '2019072002|2019072001' 
    },
    cyun(){ //cyun账户
      return this.formData['10460342-142001053'].value
    },
    resourcePool(){
      return this.formData['10460342-142001052'].value
    },
    exclusiveCloud(){
      return this.formData['10460342-142002189'].value
    }
  },
  methods: {
    clickHandler() {   
         const citySelectA = JSON.parse(sessionStorage.getItem('citySelectA'))
         const jprovice = citySelectA.address.provice
         const citySelectB = JSON.parse(sessionStorage.getItem('citySelectB'))
         const yprovice = citySelectB.address.provice
      if (this.config.key === "10460342-142001052") {
        //ipran如果是资源池，需要获取乙端地址
        if (this.yaddress && yprovice) {
          this.config.dialogContent.contentRequest.jsonParams.cityId =
            this.yaddress;
        } else {
          this.$message.warning("请先选择乙端地址");
          return
        }
      }
      if (this.config.key == "10460341-142002499") {
        //ipran甲端机房编码
        if (this.jaddress && jprovice) {
          this.config.dialogContent.contentRequest.jsonParams.areaId =
            this.jaddress;
        } else {
          this.$message.warning("请先选择甲端地址");
          return
        }
      }
      if (this.config.key == "10460341-100011034") {
        //ipran乙端机房编码
        if (this.yaddress && yprovice) {
          this.config.dialogContent.contentRequest.jsonParams.areaId =
            this.yaddress;
        } else {
          this.$message.warning("请先选择乙端地址");
          return
        }
      }
      if (this.config.key == "10460287-142002499") {
        //MSTP甲端机房编码
        if (this.jaddress && jprovice) {
          this.config.dialogContent.contentRequest.jsonParams.areaId =
            this.jaddress;
        } else {
          this.$message.warning("请先选择甲端地址");
          return
        }
      }
      if (this.config.key == "10460287-100011034") {
        //MSTP乙端机房编码
        if (this.yaddress && yprovice) {
          this.config.dialogContent.contentRequest.jsonParams.areaId =
            this.yaddress;
        } else {
          this.$message.warning("请先选择乙端地址");
          return
        }
      }
      if (this.config.key == "10460391-100011034") {
        //SDH乙端机房编码
        if (this.yaddress && yprovice) {
          this.config.dialogContent.contentRequest.jsonParams.areaId =
            this.yaddress;
        } else {
          this.$message.warning("请先选择乙端地址");
          return
        }
      }
      if (this.config.key == "10460391-142002499") {
        //SDH甲端机房编码
        if (this.jaddress && jprovice) {
          this.config.dialogContent.contentRequest.jsonParams.areaId =
            this.jaddress;
        } else {
          this.$message.warning("请先选择甲端地址");
          return
        }
      }
      if (this.config.key == "10460342-142002011" || this.config.key == "10460342-142002189") {//vpc||专属云
        this.config.dialogContent.contentRequest.defaultParams.ACCOUNTID = this.cyun 
        this.config.dialogContent.contentRequest.defaultParams.REGION_ID = this.resourcePool
        // vpcid
        if (this.yunType == '1') {
          this.config.dialogContent.contentRequest.defaultParams.ZYCLX = 'pubYUN'
          this.config.dialogContent.contentRequest.defaultParams.DEC_FLAG = 2
          
        } else {
        this.config.dialogContent.contentRequest.defaultParams.ZYCLX  = 'priYUN'
        this.config.dialogContent.contentRequest.defaultParams.DEC_FLAG = 1
        }
      }
      if (this.config.key == "10460342-142002011" && this.exclusiveCloud){
         this.config.dialogContent.contentRequest.defaultParams.PROJECT_ID = this.exclusiveCloud
      }
      this.show = true;
      this.load();
    },
    async load(filterData, page) {
      this.loading = true;
      if (page) {
        this.pageInfo.currentPage = Number(page);
      }
      if (!filterData) {
        filterData = {};
      }
      const pageInfo = {
        pageSize: this.pageInfo.pageSize,
        pageIndex: this.pageInfo.currentPage,
      };
      const { url, paramsType, defaultParams, jsonParams } =
        this.config.dialogContent.contentRequest;
      let params = {};
      if (paramsType === "string") {
        let paramStr = "";
        Object.keys(jsonParams).forEach((key) => {
          paramStr += `${key}:${jsonParams[key]};`;
        });
        params = { ...defaultParams, paramStr, pageInfo };
      } else {
        params = { ...defaultParams, ...filterData, pageInfo };
      }
      let res = await http({
        url: url,
        methods:'post',
        data: params,
      });
      if (res.code == 200) {
        const { meta } = res;
        if (meta.resList) {
          this.config.dialogContent.tableData = meta.resList.executeSqlResps;
          this.pageInfo.total = Number(meta.resList.pageInfo.rowCount);
        } else if (meta.returnJson) {
          this.config.dialogContent.tableData = meta.returnJson;
        }
        else if (meta.returnObj) {
          this.config.dialogContent.tableData = meta.returnObj;
        }
      } else {
        this.$message.error("列表接口报错");
      }
      this.loading = false;
    },
    //搜素表单中的select的options选项，要求tableForm.items数组中如果有select,则排在数组的前面，
    // optionRequests 数组中对应的写select的options的请求地址及参数,且option的接口数据是：[{text,value}]
    async querySelectOptions() {
      if (!this.config.dialogContent.optionRequests.length) {
        return;
      }
      const requests = this.config.dialogContent.optionRequests.map((item) => {
        return http({ url: item.url, data: item.defaultParams });
      });
      const results = Promise.all(requests);
      this.$attrs.tableForm.items.forEach((item, i) => {
        if (item.itemRender.name == "$select") {
          item.itemRender.options = results[i].meta.returnJson;
        }
      });
    },
    getrow(row) {
      this.formData[this.config.key].value =
        row[this.config.dialogContent.submitKey];
       this.formData[this.config.key].text =
        row[this.config.dialogContent.showKey];  
      this.showValue = row[this.config.dialogContent.showKey];
      this.$emit("input", row[this.config.dialogContent.submitKey]);
      this.$emit("getPluginValue", {value:row, key:this.config.key});
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.hide {
  z-index: 0;
  visibility: hidden;
  width: 1px;
  position: absolute;
}
.empty {
  height: 80px;
}
.el-icon-more {
  font-size: 20px;
}
.click-wrap {
  ::v-deep .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    cursor: pointer;
  }
}
</style>